<template>
  <div>
    <div class="ConfigCollapse">
      <div style="min-width:1200px;">
        <el-divider content-position="left">{{$t('TCP超时时间设置')}}</el-divider>
        <div style="width:1180px;">
          <el-descriptions title="" size="mini" :column='3' border contentClassName='linkConfigDescriptionsItem' labelClassName='linkConfigDescriptionsItem'>
            <el-descriptions-item :label="$t('close超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.close" ref="close" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('close_wait超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.close_wait" ref="closeWait" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('established超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.established" ref="established" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('fin_wait超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.fin_wait" ref="finWait" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('last_ack超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.last_ack" ref="lastAck" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('max_retrans超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.max_retrans_time" ref="retransTime" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('syn_recv超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.syn_recv" ref="recv" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('syn_sent超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.syn_sent" ref="synSent" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('time_wait超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.time_wait" ref="timeWait" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item label="tcp_liberal" :labelStyle="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'left' }">
              <el-radio v-model="record.tcp_liberal" class="tcpliberalOn" label="on">{{$t('开启')}}</el-radio>
              <el-radio v-model="record.tcp_liberal" class="tcpLiberalOff" label="off">{{$t('关闭')}}</el-radio>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('无效连接检测')" :labelStyle="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'left' }">
              <span :class="lang === 'zh'?'language-zh':'language-en'">
                <el-radio v-model="record.connect_invalid" class="connectOn" @change="Synchronize" label="on">{{$t('开启')}}</el-radio>
              </span>
              <span :class="lang === 'zh'?'language-zh':'language-en'">
                <el-radio v-model="record.connect_invalid" class="connectOff" label="off">{{$t('关闭')}}</el-radio>
              </span> 
              <span :class="(lang === 'zh'?'language-zh':'language-en') + ' ' + (record.connect_invalid=='on'?'show-switch':'hide-switch')">
                <el-switch v-model="record.connect_invalid_log" class="switch" active-color="#009966" inactive-color="#CCCCCC" active-value="on" inactive-value="off" :active-text="$t('日志')" :inactive-text="$t('日志')"></el-switch>
              </span>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('连接完整性')" :labelStyle="{ 'text-align': 'center' }" :contentStyle="{ 'text-align': 'left' }">
              <el-radio v-model="record.complete" class="on" label="on">{{$t('开启')}}</el-radio>
              <el-radio v-model="record.complete" class="off" label="off">{{$t('关闭')}}</el-radio>
            </el-descriptions-item>
            <el-descriptions-item :label="$t('未被确认的超时参数')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.time_unacknowledged" ref="unacknowledged" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('最大重连参数')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.max_retrans" ref="maxRetrans" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-divider content-position="left">{{$t('UDP参数设置')}}</el-divider>
        <div style="width:780px;">
          <el-descriptions title="" size="mini" :column='2' border contentClassName='linkConfigDescriptionsItem' labelClassName='linkConfigDescriptionsItem'>
            <el-descriptions-item :label="$t('udp超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.udp" ref="udp" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('udp流超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.udp_stream" ref="stream" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-divider content-position="left">{{$t('ICMP参数设置')}}</el-divider>
        <div style="width:780px;">
          <el-descriptions title="" size="mini" :column='2' border contentClassName='linkConfigDescriptionsItem' labelClassName='linkConfigDescriptionsItem'>
            <el-descriptions-item :label="$t('icmp超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.icmp" ref="icmp" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
            <el-descriptions-item :label="$t('icmpv6超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.icmpv6" ref="icmpv6" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <el-divider content-position="left">{{$t('其他参数设置')}}</el-divider>
        <div style="width:390px;">
          <el-descriptions title="" size="mini" :column='1' border contentClassName='linkConfigDescriptionsItem' labelClassName='linkConfigDescriptionsItem'>
            <el-descriptions-item :label="$t('通用超时时间')" :labelStyle="{ 'text-align': 'center' }">
              <el-input v-emoji v-model="record.generic" ref="generic" :style="lang === 'zh'?'width:150px;':'width:130px;'" size='mini'></el-input> &nbsp;{{$t('秒')}}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
      <el-button type="primary" @click="submit" style="margin-top:10px;" class="users">{{$t('应 用')}}</el-button>
    </div>
  </div>
</template>
<script>
import { getParameter, setParameter } from '@/api/network/link/config'
import { inputClass } from '@/utils/input-class.js'
export default {
  name: 'LinkConfig',
  data () {
    return {
      activeNames: ['1', '2', '3', '4'],
      record: {
        close: '',
        close_wait: '',
        established: '',
        fin_wait: '',
        last_ack: '',
        max_retrans_time: '',
        syn_recv: '',
        syn_sent: '',
        time_wait: '',
        tcp_liberal: 'off',
        connect_invalid: 'off',
        connect_invalid_log: 'off',
        connect_invalid_reserve: 'off',
        max_retrans: '',
        complete: 'on',
        time_unacknowledged: '',
        udp: '',
        udp_stream: '',
        icmp: '',
        icmpv6: '',
        generic: ''
      },
      lang: this.$i18n.locale,
      parameterList: {
        'tcp_be_liberal': 'tcp_liberal',
        'tcp_loose': 'complete',
        'generic_timeout': 'generic',
        'tcp_max_retrans': 'max_retrans',
        'tcp_timeout_close': 'close',
        'tcp_timeout_close_wait': 'close_wait',
        'tcp_timeout_established': 'established',
        'tcp_timeout_fin_wait': 'fin_wait',
        'tcp_timeout_last_ack': 'last_ack',
        'tcp_timeout_max_retrans': 'max_retrans_time',
        'tcp_timeout_syn_recv': 'syn_recv',
        'tcp_timeout_syn_sent': 'syn_sent',
        'tcp_timeout_time_wait': 'time_wait',
        'tcp_timeout_unacknowledged': 'time_unacknowledged',
        'udp_timeout': 'udp',
        'udp_timeout_stream': 'udp_stream',
        'icmp_timeout': 'icmp',
        'icmpv6_timeout': 'icmpv6'
      }
    }
  },
  created () {
    getParameter().then(res => {
      if (res.status === 0) {
        res.info.forEach(item => {
          if (item.name === 'tcp_be_liberal') {
            this.record.tcp_liberal = item.num ? 'on' : 'off'
          } else if (item.name === 'tcp_loose') {
            this.record.complete = item.num ? 'off' : 'on'
          } else if (item.name === 'connect_invalid') {
            this.record.connect_invalid = item.num ? 'off' : 'on'
          } else if (item.name === 'connect_invalid_log') {
            this.record.connect_invalid_log = item.num ? 'off' : 'on'
            this.record.connect_invalid_reserve = this.record.connect_invalid_log
          } else {
            this.record[this.parameterList[item.name]] = item.num
          }
        })
      }
    })
  },
  mounted () {
    this.$nextTick(() => {
      const data = ['close', 'closeWait', 'established', 'finWait', 'lastAck', 'retransTime', 'recv', 'synSent', 'timeWait', 'maxRetrans', 'unacknowledged', 'udp', 'stream', 'icmp', 'icmpv6', 'generic']
      inputClass(this.$refs, data)
    })
  },
  methods: {
    submit () {
      setParameter(this.record).then(res => {
        if (res.status === 0) {
          this.$message({
            message: this.$t('应用成功'),
            type: 'success'
          })
        }
      })
      this.record.connect_invalid_reserve = this.record.connect_invalid_log
    },
    Synchronize () {
      this.record.connect_invalid_log = this.record.connect_invalid_reserve
    }
  }
}
</script>
<style lang="less">
.linkConfigDescriptionsItem {
  width: 200px;
}

.ConfigCollapse {
  margin: 20px;
  overflow-x: auto;

  .el-collapse-item__header {
    font-size: 18px;
    font-weight: 600;
  }

  .el-collapse-item__content {
    margin-left: 20px;
  }
}

.ConfigCollapse {
  .el-divider__text {
    font-size: 18px;
    font-weight: 600;
  }

  .el-divider {
    margin: 30px 0;
  }
}

.language-zh {
  .el-radio {
    margin-right: 20px !important;
    line-height: 2 !important;
  }

  .el-radio__label {
    font-size: 14px !important;
    padding-left: 10px !important;
  }

  .el-switch .el-switch__core, 
  .el-switch .el-switch__label {
    width: 50px !important; /* 修改宽度 */
    height: 18px !important; /* 修改高度 */
  }

  switch .el-switch__core {
    margin: 0;
    font-size: 13px !important;
  }

  .el-switch .el-switch__core::after {
    width: 14px !important; /* 修改滑块宽度 */
    height: 14px !important; /* 修改滑块高度 */
  }
      
  .el-switch.is-checked .el-switch__core:after {
    left: 100% !important;
    margin-left: -15px !important;
  }

  .el-switch .el-switch__label--left {
    position: absolute !important;
    left: 3px !important; /* 修改左标签位置 */
  }

  .el-switch .el-switch__label--right {
    position: absolute !important;
    right: 3px !important; /* 修改右标签位置 */
  }

  .el-switch__label * {
    line-height: 1 !important;
    font-size: 13px !important;
    display: inline-block;
  }

  .switch .el-switch__label--left span {
    margin-left: 14px !important;
  }
}

.language-en {
  .el-radio {
    margin-right: 10px !important;
    line-height: 2 !important;
  }

  .el-radio__label {
    font-size: 14px !important;
    padding-left: 6px !important;
  }

  .el-switch .el-switch__core, 
  .el-switch .el-switch__label {
    width: 46px !important; /* 修改宽度 */
    height: 18px !important; /* 修改高度 */
  }
  
  switch .el-switch__core {
    margin: 0;
    font-size: 10px !important;
  }

  .el-switch .el-switch__core::after {
    width: 14px !important; /* 修改滑块宽度 */
    height: 14px !important; /* 修改滑块高度 */
  }
  
  .el-switch.is-checked .el-switch__core:after {
    left: 100% !important;
    margin-left: -15px !important;
  }

  .el-switch .el-switch__label--left {
    position: absolute !important;
    left: 3px !important; /* 修改左标签位置 */
  }
  
  .el-switch .el-switch__label--right {
    position: absolute !important;
    right: 3px !important; /* 修改右标签位置 */
  }

  .el-switch__label * {
    line-height: 1 !important;
    font-size: 13px !important;
    display: inline-block;
  }

  .switch .el-switch__label--right span {
    margin-left: 9px;
  }

  .switch .el-switch__label--left span {
    margin-left: 15px !important;
  }
}

.hide-switch {
  visibility: hidden;
}

.show-switch {
  visibility: inherit;
}
</style>
